<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <div id="div">123</div>
    <div id="div2">
        <p id="p">1</p>
        <h1 id="h1">h1</h1>

    </div>

    <script>
        // let div = document.querySelector("#div")
        // let div1 = document.getElementsByTagName("div");
        // let div2 = document.querySelectorAll("div");
        // console.log(div1, div2)

        // let div2 = document.querySelector("#div2");
        // console.log(div2.firstElementChild)

        // let h1 = document.querySelector("h1");
        // console.log(h1.previousElementSibling)

        // let div2 = document.querySelector("#div2");
        // let span = document.createElement("span");
        // let p = document.createElement("p")
        // let node = document.createTextNode("span");
        // span.appendChild(node)
        // console.log(span)
        // span.innerHTML = "span";
        // div2.appendChild(span)

        // console.log(div2.innerHTML)
        // console.log(div2.innerText)

        // div2.innerHTML = "<span>span</span>"
        // div2.innerText = "<span>span</span>"

        // console.log(div2.outerHTML)
        // div2.prepend(span)


        // let div2 = document.querySelector("#div2");
        // let p = document.querySelector("#p");
        // let h1 = document.querySelector("#h1");
        // let span = document.createElement("span");
        // console.log(span.innerHTML);
        // span.innerHTML = "hhhh"
        // div2.insertBefore(span, h1)
        // div2.replaceChild(span, p)
        // div2.removeChild(h1)

        // div2.before(span)

        // let div2 = document.querySelector("#div2");
        // let clone = div2.cloneNode(true);
        // console.log(clone)
    </script>
</body>

</html>